<ng-container *ngIf="selection">
  <nav ngbNav
       #nav="ngbNav"
       class="nav-tabs"
       cdStatefulTab="rgw-bucket-details">
    <ng-container ngbNavItem="details">
      <a ngbNavLink
         i18n>Details</a>
      <ng-template ngbNavContent>

        <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
               data-testid="rgw-bucket-details">
          <tbody>
            <tr>
              <td i18n
                  class="bold w-25">Versioning</td>
              <td class="w-75">{{ selection.versioning }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">Encryption</td>
              <td>{{ selection.encryption }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">Replication</td>
              <td>{{ replicationStatus }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">MFA Delete</td>
              <td>{{ selection.mfa_delete }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">Index type</td>
              <td>{{ selection.index_type }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">Placement rule</td>
              <td>{{ selection.placement_rule }}</td>
            </tr>
            <tr>
              <td i18n
                  class="bold">Last modification time</td>
              <td>{{ selection.mtime | cdDate }}</td>
            </tr>
          </tbody>
        </table>

        <!-- Bucket quota -->
        <div>
          <legend i18n>Bucket quota</legend>
          <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
                 data-testid="rgw-bucket-quota-details">
            <tbody>
              <tr>
                <td i18n
                    class="bold w-25">Enabled</td>
                <td class="w-75">{{ selection.bucket_quota.enabled | booleanText }}</td>
              </tr>
              <ng-container *ngIf="selection.bucket_quota.enabled">
                <tr>
                  <td i18n
                      class="bold">Maximum size</td>
                  <td *ngIf="selection.bucket_quota.max_size <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="selection.bucket_quota.max_size > -1">
                    {{ selection.bucket_quota.max_size | dimless }}
                  </td>
                </tr>
                <tr>
                  <td i18n
                      class="bold">Maximum objects</td>
                  <td *ngIf="selection.bucket_quota.max_objects <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="selection.bucket_quota.max_objects > -1">
                    {{ selection.bucket_quota.max_objects }}
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </table>
        </div>

        <!-- Locking -->
        <legend i18n>Locking</legend>
        <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
               data-testid="rgw-bucket-locking-details">
          <tbody>
            <tr>
              <td i18n
                  class="bold w-25">Enabled</td>
              <td class="w-75">{{ selection.lock_enabled | booleanText }}</td>
            </tr>
            <ng-container *ngIf="selection.lock_enabled">
              <tr>
                <td i18n
                    class="bold">Mode</td>
                <td>{{ selection.lock_mode }}</td>
              </tr>
              <tr>
                <td i18n
                    class="bold">Days</td>
                <td>{{ selection.lock_retention_period_days }}</td>
              </tr>
            </ng-container>
          </tbody>
        </table>

      <!-- Tags -->
      <ng-container *ngIf="(selection.tagset | keyvalue)?.length">
        <legend i18n>Tags</legend>
        <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
          <tbody>
            <tr *ngFor="let tag of selection.tagset | keyvalue">
              <td i18n
                  class="bold w-25">{{tag.key}}</td>
              <td class="w-75">{{ tag.value }}</td>
            </tr>
          </tbody>
        </table>
      </ng-container>

      </ng-template>
    </ng-container>

    <ng-container ngbNavItem="permissions">
      <a ngbNavLink
         i18n>Policies</a>
      <ng-template ngbNavContent>
        <div class="table-scroller">
          <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
            <tbody>
              <tr>
                <td i18n
                    class="bold w-25">Bucket policy</td>
                <td><pre>{{ selection.bucket_policy | json}}</pre></td>
              </tr>
              <tr>
                <td i18n
                    class="bold w-25">Lifecycle
                  <div *ngIf="(selection.lifecycle | json) !== '{}'"
                       class="input-group">
                    <button type="button"
                            class="btn btn-light"
                            [ngClass]="{'active': lifecycleFormat === 'json'}"
                            (click)="lifecycleFormat = 'json'">
                          JSON
                    </button>
                    <button type="button"
                            class="btn btn-light"
                            [ngClass]="{'active': lifecycleFormat === 'xml'}"
                            (click)="lifecycleFormat = 'xml'">
                          XML
                    </button>
                  </div>
                </td>
                <td>
                  <cds-code-snippet display="multi"
                                    *ngIf="lifecycleFormat === 'json'">
                    {{selection.lifecycle | json}}
                  </cds-code-snippet>
                  <cds-code-snippet display="multi"
                                    *ngIf="lifecycleFormat === 'xml'">
                    {{ (selection.lifecycle | xml:{'Rules':'Rule'}) || '-'}}
                  </cds-code-snippet>
                </td>
              </tr>
              <tr>
                <td i18n
                    class="bold w-25">Replication policy</td>
                <td><pre>{{ selection.replication | json}}</pre></td>
              </tr>
              <tr>
                <td i18n
                    class="bold w-25">ACL</td>
                <td>
                  <table class="table">
                    <thead>
                      <tr i18n>
                        <th>Grantee</th>
                        <th>Permissions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr i18n>
                        <td>Bucket Owner</td>
                        <td>{{ aclPermissions.Owner || '-'}}</td>
                      </tr>
                      <tr i18n>
                        <td>Everyone</td>
                        <td>{{ aclPermissions.AllUsers || '-'}}</td>
                      </tr>
                      <tr i18n>
                        <td>Authenticated users group</td>
                        <td>{{ aclPermissions.AuthenticatedUsers || '-'}}</td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </ng-template>
    </ng-container>
  </nav>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
